<template>
    <div class="video-player">
        <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"
            @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)"
            @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)"
            @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)"
            @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied"
            @statechanged="playerStateChanged($event)">
        </video-player>
    </div>
</template>

<script>
    import 'video.js/dist/video-js.css'
    import {
        videoPlayer
    } from 'vue-video-player'

    export default {
        name: '',
        props: {
            url: {
                type: String,
                default: ''
            }
        },
        components: {
            videoPlayer
        },
        data() {
            return {

            }
        },
        mounted() {
            setTimeout(() => {
                console.log('dynamic change options', this.player)
                // change src
                // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
                // change item
                // this.$set(this.playerOptions.sources, 0, {
                //   type: "video/mp4",
                //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
                // })
                // change array
                // this.playerOptions.sources = [{
                //   type: "video/mp4",
                //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
                // }]
                // this.player.muted(false)
            }, 5000)
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            },
            playerOptions() {
                return {
                    width: '590',
                    height: '360',
                    autoplay: false,
                    preload: 'auto',
                    fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    muted: false,
                    language: 'zh-CN',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    sources: [{
                        type: "video/mp4",
                        src: this.url,
                    }],
                    poster: "",
                }
            },
        },
        methods: {
            // listen event
            onPlayerPlay(player) {
                // console.log('player play!', player)
            },
            onPlayerPause(player) {
                // console.log('player pause!', player)
            },
            onPlayerEnded(player) {
                // console.log('player ended!', player)
            },
            onPlayerLoadeddata(player) {
                // console.log('player Loadeddata!', player)
            },
            onPlayerWaiting(player) {
                // console.log('player Waiting!', player)
            },
            onPlayerPlaying(player) {
                // console.log('player Playing!', player)
            },
            onPlayerTimeupdate(player) {
                // console.log('player Timeupdate!', player.currentTime())
            },
            onPlayerCanplay(player) {
                // console.log('player Canplay!', player)
            },
            onPlayerCanplaythrough(player) {
                // console.log('player Canplaythrough!', player)
            },
            // or listen state event
            playerStateChanged(playerCurrentState) {
                // console.log('player current update state', playerCurrentState)
            },
            // player is ready
            playerReadied(player) {
                // seek to 10s
                // console.log('example player 1 readied', player)
                // player.currentTime(10)
                // console.log('example 01: the player is readied', player)
            }
        }
    }

</script>

<style lang="scss">
.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
